<script setup>
import TopButton from "@/components/Pengyq/TopButton.vue";
import { ref, onMounted } from "vue";
import { getShopListAPI } from "@/server/api/ItemCommodity";
import { useUseStore } from "@/stores/user";
import { useI18n } from "vue-i18n";
const { t } = useI18n();
const useStore = useUseStore();
const FollowList = ref([]);

const getShopListFun = async (limit, page, uid) => {
  const res = await getShopListAPI(limit, page, uid);
  FollowList.value = res.data.data.list;
  FollowList.value.forEach((item) => {
    item.userImage = useStore.ing + item.userImage;
  });
  console.log(res.data.data.list);
};
onMounted(() => {
  getShopListFun(9, 1, useStore.userId);
});
</script>

<template>
  <div>
    <TopButton :title="$t('me.sellerCenter.applicationRecords')" />
    <div class="StoreAttention">
      <ul class="list">
        <li v-for="(i, index) in FollowList" :key="index"
          @click="$router.push(`/ManageShopsubset/${i.shopId}/${i.shopName}`)">
          <header>
            <div class="login">
              <img v-lazy="i.userImage" alt="" />
            </div>
            <div class="right_tex">
              <h5>{{ i.itemName || i.shopName }}</h5>
              <div class="totol">
                {{ i.itemIntroduce?.slice(0, 5) }} {{ i.follows }} Fans
                &nbsp;&nbsp;{{ i.score }}
                <van-rate v-model="i.score" :size="15" :count="5" color="#ffd21e" void-icon="star" void-color="#eee"
                  allow-half />
              </div>
            </div>
          </header>
        </li>
      </ul>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.StoreAttention {
  font-size: 14rem;
  padding: 60rem 10rem 0;

  .list {
    li {
      height: 92rem;

      header {
        margin-bottom: 30rem;
        display: flex;
        padding: 10rem 0;
        border-bottom: 1rem solid #d2d2d2;

        .right_tex {
          line-height: 30rem;
          margin: 0 10rem;

          >h5 {
            font-size: 20rem;
            font-weight: 500;
          }

          .totol {
            color: #d2d2d2;
          }
        }

        .login {
          overflow: hidden;
          width: 55rem;
          height: 55rem;
          border-radius: 50%;

          img {
            object-fit: cover;
            width: 100%;
            height: 100%;
          }
        }
      }
    }
  }
}
</style>
